<template>
    <div>
        <Row style="margin-top:20px;padding-bottom:20px;font-size:14px">
            <Col span="2">
                  <Button style="background-color:#143f87;color:white" size="large">用户查询</Button>
            </Col>
            <Col span="18" style="padding-left:8px">   
                <Input v-model="queryCondition.title" size="large" placeholder="请输入企业或机构关键字"></Input>
            </Col>
            <Col span="4">
                <Button style="background-color:#143f87;color:white" size="large" @click="handleSearch">搜索</Button>
            </Col>
        </Row>
        <br>
        <Row>
            <Col span="2" style="padding-top:5px">
                <span>搜索类别：</span>
            </Col>
            <Col span="3">
                <Select v-model="queryCondition.role_type" style="width:100px">
                    <Option value="0" >全部类型</Option>
                    <Option value="4" >企业搜索</Option>
                    <Option value="5" >机构搜索</Option>
                    <Option value="3" >个人用户</Option>
                </Select>
            </col>
            <Col span="3" style="padding-left:20px;padding-top:5px">
                <span>企业/机构类别：</span>
            </Col> 
            <Col span="3">
                <Select v-model="queryCondition.member_type" style="width:100px">
                    <Option value="*" label="全部类型"></Option>
                    <Option :value="item.name" v-for="item in memberTypeList" :key="item.name">{{item.name}}</Option>
                </Select>
            </col>
            <Col span="2" style="padding-top:5px">
                <span>所在地区：</span>
            </Col>
            <Col span="9">
                <al-selector v-model="queryCondition.area" data-type="name" level="2"/>
            </Col>
            <!-- <Col span="3">
                <Select v-model="queryCondition.area[0]" style="width:100px" placeholder="请选择省份">
                    <Option v-for="item in provinceList" :value="item.name" :key="item.name">{{item.name}}</Option>
                </Select>
            </col>
            <Col span="3">
                <Select v-model="queryCondition.area[1]" style="width:100px" placeholder="请选择城市">
                    <Option v-for="item in cityList" :value="item.name" :key="item.name">{{item.name}}</Option>
                </Select>
            </col>
            <Col span="3">
                <Select v-model="queryCondition.area[2]" style="width:100px" placeholder="请选择区县">
                    <Option v-for="item in districtList" :value="item.name" :key="item.name">{{item.name}}</Option>
                </Select>
            </col> -->
        </Row>
        <br>
        <div>
            <router-link v-for="item in memberList" style="color:black" :to="{name:'personal_exhibition',params:{id: item.id} }">
                <Card  class="content">
                    <p solt="title">
                        <Row>
                        <Col span="8">
                            <Row>
                                <Col v-if="item.role_type==4" span="3">[企业]</Col>
                                <Col v-if="item.role_type==5" span="3">[机构]</Col>
                                <Col v-if="item.role_type==3" span="3">[个人]</Col>
                                <Col span="21"><h3 style="color:black">{{item.enterprise_name}}</h3></Col>
                            </Row>
                            
                            
                        </Col>
                        <Col span="6">
                            <Row>
                                <Col span="6">
                                    地址：
                                </Col>
                                <Col span="18">
                                    {{item.area.join("")}}
                                </Col>
                            </Row>
                        </Col>
                        <Col span="5" v-if="item.role_type!=3" >
                            <Row>
                                <Col span="10">企业类型:</Col>
                                <Col span="14">{{item.member_type}}</Col>
                            </Row>
                        </Col>
                        <Col span="5">
                            <Row>
                                <Col span="10">注册时间:</Col>
                                <Col span="14">{{item.formated_create_time}}</Col>
                            </Row>
                        </Col>
                        </Row>
                    </p>
                </Card>
            </router-link>
        </div>
        <Row style="margin-bottom:20px;font-size:14px"><AutoPage v-model="page"></AutoPage></Row>
    </div>
</template>
<script>
import Vue from 'vue';
    import Page from "@/common/model/Page";
    import AutoPage from "@/common/components/AutoPage";
    import Member from "@/common/model/Member";
export default {
    data(){
        var queryCondition = {
            title:"",
            role_type: "0",
            area: new Array(3),
            member_type:"*"
        }
        return{
            queryCondition:queryCondition,
            page: new Page("search/member",this.putCondition(queryCondition)),
            columns:[
                { 
                    title:"企业/机构名称",
                    key:"enterprise_name",
                    align:"center",
                    render:(h,params)=>{
                        return h('router-link',
                        {props: {
                            to: {
                                 name: "personal_exhibition", params:{id:params.row.id}
                            }
                        }},params.row.enterprise_name,);
                    }
                },
                { title:"所在地",key:"area",align:"center"},
                { title:"企业/机构类型",key:"member_type",align:"center"},
                { title:"注册时间",key:"formated_create_time",align:"center",width:200,
                 render: (h, params) => {
                            return h('div',params.row.formated_create_time);
                        }
                }
            ]
        }
    },
    methods:{
        handleSearch() {
            this.page.action_data = this.putCondition(this.queryCondition);
            //console.log(this.page.action_data);
            this.page.getData();
        },
        putCondition(data){
            var area;
            if(data.area[0]==null||data.area[0]==""){
                area="";
                console.log(111);
            }else if(data.area[1]==""||data.area[1]==null){
                area=data.area[0];
                console.log(222);
            }else if(data.area[2]==""||data.area[2]==null){
                area=data.area[0]+","+data.area[1];
                console.log(333);
            }else{
                area=data.area.join(",");
            }
            return {
                title:data.title,
                role_type:data.role_type,
                area,
                member_type:data.member_type
            }
        }
    },
    computed:{
        cityList(){
            for(var i=0;i<this.provinceList.length;i++){
                if(this.provinceList[i].name == this.queryCondition.area[0]){
                    return this.provinceList[i].children;
                }
            }
            return [];
        },
        districtList(){
            for(var i=0;i<this.cityList.length;i++){
                if(this.cityList[i].name == this.queryCondition.area[1]){
                    return this.cityList[i].children;
                }
            }
            return [];
        },
        memberList(){
            return Member.parseList(this.page.list);
        },
        provinceList(){
            return this.$store.state.app.dicTree.area.children;
        },
        memberTypeList(){
            if(this.queryCondition.role_type == 4){
                return this.$store.state.app.dicTree.company_type.children;
            }else if(this.queryCondition.role_type == 5){
                return this.$store.state.app.dicTree.service_agency.children;
            }
        }
    },
    components:{
        AutoPage
    },
    watch: {
        '$route': function(){
             this.queryCondition.role_type = this.$route.query.rtype;
              this.handleSearch();
        }
    },
    created(){
        if(this.$route.query.rtype!=null){
            this.queryCondition.role_type=this.$route.query.rtype;
            this.queryCondition.area=this.$route.query.cities||[];
            this.queryCondition.member_type=unescape(this.$route.query.mtype);
            this.queryCondition.title=unescape(this.$route.query.searchitem);
            this.handleSearch();
        }
    }
};
</script>
<style scoped>
    .content{
        margin-top: 10px;
        padding-bottom: 5px;
    }

</style>